<template>
  <div class="kawaii-messages-container">
    <!-- 动态气泡背景 -->
    <div class="kawaii-bubbles">
      <div class="bubble bubble-1"></div>
      <div class="bubble bubble-2"></div>
      <div class="bubble bubble-3"></div>
      <div class="bubble bubble-4"></div>
      <div class="bubble bubble-5"></div>
      <div class="bubble bubble-6"></div>
    </div>

    <!-- 左侧导航区域 -->
    <div class="kawaii-sidebar">
      <div class="kawaii-menu-container">
        <div class="kawaii-title">
          <span class="kawaii-title-icon">✉️</span>
          消息中心
        </div>
        <div class="kawaii-menu">
          <div class="kawaii-menu-item" @click="goToPage('messages')">
            <div class="kawaii-menu-icon-container">
              <span class="kawaii-menu-icon">💌</span>
            </div>
            <span>我的消息</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
          <div class="kawaii-menu-item active" @click="goToPage('replies')">
            <div class="kawaii-menu-icon-container reply-icon">
              <span class="kawaii-menu-icon">💬</span>
            </div>
            <span>回复我的</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
          <div class="kawaii-menu-item" @click="goToPage('likes')">
            <div class="kawaii-menu-icon-container like-icon">
              <span class="kawaii-menu-icon">❤️</span>
            </div>
            <span>收到的赞</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
          <div class="kawaii-menu-item" @click="goToPage('notify')">
            <div class="kawaii-menu-icon-container notify-icon">
              <span class="kawaii-menu-icon">🔔</span>
            </div>
            <span>系统通知</span>
            <div class="kawaii-menu-indicator"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="kawaii-replies-content">
      <div class="kawaii-replies-header">
        <div class="kawaii-title">
          <span class="kawaii-title-emoji">💬</span>
          回复我的
        </div>
      </div>

      <div class="kawaii-replies-list">
        <div class="kawaii-reply-item">
          <div class="kawaii-reply-user">
            <div class="kawaii-user-avatar">
              <img src="/src/assets/anime/avatar/avatar7.png" alt="头像" />
            </div>
            <div class="kawaii-user-info">
              <div class="kawaii-user-name">
                java大学习
                <span class="kawaii-reply-action">回复了我的评论</span>
              </div>
              <div class="kawaii-reply-time">2022年6月28日 09:12</div>
            </div>
          </div>
          <div class="kawaii-reply-content">
            <div class="kawaii-content-box">
              <div class="kawaii-content-text">发你了</div>
              <div class="kawaii-content-actions">
                <span class="kawaii-action-btn">
                  <span class="kawaii-icon-reply">↩️</span>
                  回复
                </span>
                <span class="kawaii-action-btn">
                  <span class="kawaii-icon-like">❤️</span>
                  点赞
                </span>
                <span class="kawaii-action-btn kawaii-delete-btn">
                  <span class="kawaii-icon-delete">🗑️</span>
                  删除
                </span>
              </div>
            </div>
          </div>
          <div class="kawaii-reply-tag">三连卡包</div>
        </div>

        <div
          class="kawaii-empty-content"
          v-if="repliesList.length === 0 && !showDefaultReply"
        >
          <div class="kawaii-empty-icon">📪</div>
          <p class="kawaii-empty-text">还没有收到回复哦</p>
          <p class="kawaii-empty-subtext">
            发布更多内容，会有小伙伴来回复你的~
          </p>
        </div>

        <div
          v-for="(reply, index) in repliesList"
          :key="index"
          class="kawaii-reply-item"
        >
          <div class="kawaii-reply-user">
            <div class="kawaii-user-avatar">
              <img
                :src="
                  reply.avatar ||
                  '/src/assets/anime/avatar/avatar' + ((index % 6) + 1) + '.png'
                "
                alt="头像"
              />
            </div>
            <div class="kawaii-user-info">
              <div class="kawaii-user-name">
                {{ reply.username }}
                <span class="kawaii-reply-action">{{ reply.action }}</span>
              </div>
              <div class="kawaii-reply-time">{{ reply.time }}</div>
            </div>
          </div>
          <div class="kawaii-reply-content">
            <div class="kawaii-content-box">
              <div class="kawaii-content-text">{{ reply.content }}</div>
              <div class="kawaii-content-actions">
                <span class="kawaii-action-btn">
                  <span class="kawaii-icon-reply">↩️</span>
                  回复
                </span>
                <span class="kawaii-action-btn">
                  <span class="kawaii-icon-like">❤️</span>
                  点赞
                </span>
                <span class="kawaii-action-btn kawaii-delete-btn">
                  <span class="kawaii-icon-delete">🗑️</span>
                  删除
                </span>
              </div>
            </div>
          </div>
          <div class="kawaii-reply-tag" v-if="reply.tag">{{ reply.tag }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 获取路由器实例
const router = useRouter()

// 页面跳转函数
const goToPage = (page: string) => {
  switch (page) {
    case 'messages':
      router.push('/user/messages')
      break
    case 'replies':
      router.push('/user/replies')
      break
    case 'likes':
      router.push('/user/likes')
      break
    case 'notify':
      router.push('/user/notify')
      break
  }
}

interface ReplyItem {
  username: string
  action: string
  time: string
  content: string
  tag?: string
  avatar?: string
}

const repliesList = ref<ReplyItem[]>([])

// 是否显示默认回复例子
const showDefaultReply = ref(true)
</script>

<style scoped>
.kawaii-messages-container {
  position: relative;
  width: 70%;
  margin: 20px auto;
  min-height: calc(100vh - 40px);
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(255, 182, 193, 0.3);
  display: flex;
  overflow: hidden;
  border: 2px solid rgba(255, 182, 193, 0.4);
  backdrop-filter: blur(10px);
  z-index: 1;
}

/* 动态气泡背景 */
.kawaii-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(8px);
  animation: float-bubble 15s infinite ease-in-out;
}

.bubble-1 {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #ffb7ef, #ff9ed5);
  top: 10%;
  left: 10%;
  animation-duration: 20s;
  animation-delay: 0s;
}

.bubble-2 {
  width: 120px;
  height: 120px;
  background: linear-gradient(45deg, #b5c9ff, #a2d0ff);
  top: 20%;
  right: 15%;
  animation-duration: 25s;
  animation-delay: 2s;
}

.bubble-3 {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #ffd1d9, #ffa8c9);
  bottom: 15%;
  left: 20%;
  animation-duration: 18s;
  animation-delay: 1s;
}

.bubble-4 {
  width: 150px;
  height: 150px;
  background: linear-gradient(45deg, #c5ebff, #c3d1ff);
  bottom: 20%;
  right: 10%;
  animation-duration: 22s;
  animation-delay: 3s;
}

.bubble-5 {
  width: 70px;
  height: 70px;
  background: linear-gradient(45deg, #ffe2c8, #ffc4ee);
  top: 50%;
  left: 30%;
  animation-duration: 19s;
  animation-delay: 2.5s;
}

.bubble-6 {
  width: 90px;
  height: 90px;
  background: linear-gradient(45deg, #c9fff0, #b5e9ff);
  top: 60%;
  right: 25%;
  animation-duration: 24s;
  animation-delay: 1.5s;
}

@keyframes float-bubble {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(5%, 10%) rotate(5deg);
  }

  50% {
    transform: translate(-5%, 15%) rotate(-5deg);
  }

  75% {
    transform: translate(10%, 5%) rotate(8deg);
  }
}

/* 左侧菜单 */
.kawaii-sidebar {
  width: 180px;
  background: linear-gradient(to bottom, #fff0f5, #fef9ff);
  border-right: 2px solid rgba(255, 182, 193, 0.4);
  position: relative;
  overflow: hidden;
}

.kawaii-sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #ffcbe3, transparent);
}

.kawaii-menu-container {
  padding: 20px 0;
}

.kawaii-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #d15b7b;
  padding: 0 20px 15px;
  border-bottom: 2px solid #ffcbe3;
  position: relative;
  overflow: hidden;
}

.kawaii-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #ffcbe3, #ff61d2, #ffcbe3);
  animation: shimmer 3s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.kawaii-title-icon {
  margin-right: 8px;
  font-size: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.kawaii-menu {
  margin-top: 15px;
}

.kawaii-menu-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #7b5f7a;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 4px solid transparent;
  position: relative;
  margin-bottom: 4px;
}

.kawaii-menu-item:hover {
  background-color: #fff7fa;
  color: #d15b7b;
  border-left: 4px solid #ffcbe3;
  transform: translateX(2px);
}

.kawaii-menu-item.active {
  background-color: #fff0f5;
  color: #d15b7b;
  font-weight: 500;
  border-left: 4px solid #ff9fcf;
}

.kawaii-menu-icon-container {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffd1e3, #ffecf2);
  margin-right: 10px;
  transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(255, 182, 193, 0.2);
}

.kawaii-menu-item:hover .kawaii-menu-icon-container {
  transform: rotate(5deg) scale(1.1);
}

.reply-icon {
  background: linear-gradient(135deg, #d1e4ff, #ecf2ff);
}

.like-icon {
  background: linear-gradient(135deg, #ffd1d1, #ffecec);
}

.notify-icon {
  background: linear-gradient(135deg, #fff9d1, #fffcec);
}

.kawaii-menu-icon {
  font-size: 16px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.kawaii-menu-indicator {
  position: absolute;
  right: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff61d2;
  opacity: 0;
  transition: all 0.3s;
}

.kawaii-menu-item:hover .kawaii-menu-indicator {
  opacity: 0.5;
}

.kawaii-menu-item.active .kawaii-menu-indicator {
  opacity: 1;
  box-shadow: 0 0 6px #ff61d2;
  animation: pulse 2s infinite;
}

/* 回复内容区域 */
.kawaii-replies-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: linear-gradient(to bottom right, #fff7fa, #fefeff);
}

.kawaii-replies-content::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.kawaii-replies-content::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ffcbe3, #ff9fcf);
  border-radius: 6px;
}

.kawaii-replies-content::-webkit-scrollbar-track {
  background: #fff7fa;
}

.kawaii-replies-header {
  padding: 20px;
  border-bottom: 2px solid #ffecf2;
  position: sticky;
  top: 0;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  z-index: 2;
  box-shadow: 0 4px 10px -4px rgba(255, 182, 193, 0.15);
}

.kawaii-replies-header .kawaii-title {
  padding: 0;
  border-bottom: none;
}

.kawaii-replies-header .kawaii-title::after {
  display: none;
}

.kawaii-title-emoji {
  font-size: 24px;
  margin-right: 10px;
  animation: pulse 2s infinite;
}

.kawaii-replies-list {
  padding: 10px 20px;
}

.kawaii-reply-item {
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 15px rgba(255, 182, 193, 0.2);
  transition: all 0.3s;
  border: 1px solid rgba(255, 232, 240, 0.8);
  transform-origin: center;
  animation: pop-in 0.5s ease-out;
}

@keyframes pop-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.kawaii-reply-item:hover {
  box-shadow: 0 8px 25px rgba(255, 182, 193, 0.3);
  transform: translateY(-3px);
  border-color: rgba(255, 210, 230, 0.9);
}

.kawaii-reply-user {
  display: flex;
  margin-bottom: 12px;
}

.kawaii-user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  overflow: hidden;
  margin-right: 12px;
  flex-shrink: 0;
  background-color: #fff0f5;
  border: 2px solid #ffcbe3;
  box-shadow: 0 4px 8px rgba(255, 182, 193, 0.2);
  transition: all 0.3s;
}

.kawaii-reply-item:hover .kawaii-user-avatar {
  transform: scale(1.05) rotate(3deg);
  border-color: #ff9fcf;
}

.kawaii-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.kawaii-reply-item:hover .kawaii-user-avatar img {
  transform: scale(1.1);
}

.kawaii-user-info {
  flex: 1;
  min-width: 0;
}

.kawaii-user-name {
  font-size: 15px;
  font-weight: 600;
  color: #7b5f7a;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.kawaii-reply-action {
  color: #ad8db3;
  font-weight: normal;
  margin-left: 8px;
  font-size: 13px;
  background-color: #fff0f5;
  padding: 2px 8px;
  border-radius: 100px;
}

.kawaii-reply-time {
  font-size: 12px;
  color: #ad8db3;
}

.kawaii-reply-content {
  flex: 1;
  min-width: 0;
}

.kawaii-content-box {
  background-color: #fff9fc;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(255, 182, 193, 0.1);
  border: 1px solid #ffecf2;
  transition: all 0.3s;
}

.kawaii-reply-item:hover .kawaii-content-box {
  box-shadow: 0 4px 12px rgba(255, 182, 193, 0.2);
}

.kawaii-content-text {
  font-size: 15px;
  color: #7b5f7a;
  margin-bottom: 12px;
  word-break: break-all;
  line-height: 1.5;
}

.kawaii-content-actions {
  display: flex;
  gap: 16px;
}

.kawaii-action-btn {
  font-size: 13px;
  color: #ad8db3;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  padding: 4px 10px;
  border-radius: 100px;
  background-color: transparent;
}

.kawaii-action-btn:hover {
  color: #d15b7b;
  background-color: #fff0f5;
}

.kawaii-action-btn span {
  margin-right: 5px;
  font-size: 14px;
}

.kawaii-delete-btn:hover {
  color: #ff6e8b;
}

.kawaii-reply-tag {
  position: absolute;
  right: 16px;
  top: 16px;
  font-size: 12px;
  color: #8e9bff;
  background-color: rgba(142, 155, 255, 0.1);
  padding: 4px 10px;
  border-radius: 100px;
  box-shadow: 0 2px 5px rgba(142, 155, 255, 0.15);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 105, 180, 0.4);
  }

  70% {
    box-shadow: 0 0 0 5px rgba(255, 105, 180, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 105, 180, 0);
  }
}

/* 空状态 */
.kawaii-empty-content {
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: float 3s infinite ease-in-out;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.kawaii-empty-icon {
  font-size: 60px;
  margin-bottom: 20px;
  animation: wave 2s infinite;
  display: inline-block;
}

@keyframes wave {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(10deg);
  }

  75% {
    transform: rotate(-10deg);
  }
}

.kawaii-empty-text {
  font-size: 18px;
  color: #7b5f7a;
  font-weight: 600;
  margin-bottom: 8px;
}

.kawaii-empty-subtext {
  font-size: 14px;
  color: #ad8db3;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .kawaii-messages-container {
    width: 85%;
  }
}

@media screen and (max-width: 768px) {
  .kawaii-messages-container {
    width: 95%;
    flex-direction: column;
  }

  .kawaii-sidebar,
  .kawaii-replies-content {
    width: 100%;
  }

  .kawaii-reply-item {
    flex-direction: column;
  }

  .kawaii-reply-user {
    margin-right: 0;
    margin-bottom: 15px;
    width: 100%;
  }

  .kawaii-reply-tag {
    position: relative;
    right: auto;
    top: auto;
    margin-top: 10px;
    display: inline-block;
  }
}
</style>
